<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="test">
			<div class="row" style="margin-bottom: 1.25rem;">
				<label>id:</label>
				<input type="text" v-model="id" />
				<label>name:</label>
				<input type="text" v-model="name" />
				<input type="button" value="增加" @click="addperson"/>
			</div>
			<input type="text" v-model.lazy="keyword"/>
			<input type="button" @click="searchname" value="搜索"/>
			<table>
				<thead>
					<tr>
						<td>id</td>
						<td>name</td>
						<td>curenttime</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in searchname(keyword)" :key="item.id">
						<td >{{ item.id }}</td>
						<td >{{ item.name }}</td>
						<td >{{ item.curenttime }}</td>
						<td ><a href="#" @click="deleteitem(item.id)">删除</a></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script>
			var vue = new Vue({
				el:'#test',
				data:{
					id:"test",
					name:'点我点我快点我！',
					list:[{"id":"1","name":"wangzy","curenttime":"123456432"}],
					keyword:""
				},
				methods:{
					addperson(){
						this.list.push({
							"id":this.id,
							"name":this.name,
							"curenttime":Date.now()
						})
					},
					searchname(keyword){
						var newlist = []
						//console.log(this)
						//some函数匹配找到就结束
						//map函数匹配，匹配不到则为undifined，全部返回
						/* 
						this.list.map(item => {
							//console.log(item)
							//console.log(item.name.indexOf("a"))
							if (item.name.indexOf(keyword) !== -1)
								return item
						})
						return list 
						*/
						//filter函数匹配所有，只返回匹配到的
						this.list.forEach(item => {
							//console.log(item)
							//console.log(item.name.indexOf("a"))
							if (item.name.indexOf(keyword) !== -1)
								newlist.push(item)
						})
						return newlist
					},
					deleteitem(id){
						//this.list.splice(index,1)//通过下标删除
						//通过id删除
						/*
						some和foreach都可以循环遍历
						some按顺序遍历到之后就返回，不继续遍历
						foreach会将所有遍历完成
						*/
						this.list.some((item,index)=>{
							//console.log(item)
							this.list.splice(index,1)
							return true
						})
					}
				}
			})
		</script>
	</body>
</html>
